<template>
  <q-btn v-if='store.isGuest' icon='login' label='登录/注册' flat to='/auth/login' />
  <template v-else>
    <!--无消息状态-->
    <q-btn icon='notifications' flat label='消息列表' v-if='!store.messages.length'>
      <q-menu fit>
        <q-list>
          <q-item class='flex flex-center'>
            <q-item-section side class='no-padding'>
              <q-item-label>暂无消息</q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
    <!--有消息状态-->
    <q-btn icon='campaign' flat :label='"消息列表（"+store.messages.length+"条）"' v-else>
      <q-menu class='overflow-auto'>
        <q-list>
          <q-item v-for='msg in store.messages' :key='msg.orderId' clickable
                  @click='toDetail(msg.orderId)'>
            <q-item-section>
              <q-item-label lines='1'>{{ msg.goodsName }}</q-item-label>
              <q-item-label lines='2' caption>
                {{ msg.statusUpdateTime }}
              </q-item-label>
              <q-item-label lines='3' caption>
                更新状态为：{{ mapOrderStatus(msg.status) }}
              </q-item-label>
            </q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>

    <q-btn icon='account_circle' :label='store.name' flat>
      <q-menu>
        <q-list>
          <q-item clickable @click='signOut' class='text-primary'>
            <q-item-section avatar>
              <q-icon name='logout' />
            </q-item-section>
            <q-item-section no-wrap>退出登录</q-item-section>
          </q-item>
          <q-item v-if='store.isUser' clickable to='/user' class='text-primary'>
            <q-item-section avatar>
              <q-icon name='person' />
            </q-item-section>
            <q-item-section no-wrap>个人中心</q-item-section>
          </q-item>
        </q-list>
      </q-menu>
    </q-btn>
  </template>
</template>

<script lang='ts'>
import { defineComponent } from 'vue';
import { signOut } from 'src/services/api';
import { useStore } from 'src/status';
import { mapOrderStatus } from 'src/services/mapper';
import { pinia } from 'boot/config';
import { useRouter } from 'vue-router';

const store = useStore(pinia);

export default defineComponent({
  name: 'HeaderRight',
  setup() {
    const router = useRouter();
    const toDetail = async (id: number) => {
      await router.push({
        path: '/order_detail',
        query: { id }
      });
      router.go(0);
    };
    return {
      store,
      signOut,
      mapOrderStatus,
      toDetail
    };
  }
});
</script>
<style scoped lang='scss'>
.q-list {
  max-height: 300px;
}
</style>
